<template>
  <div>
    <div id="navbar" class="navbar navbar-default ace-save-state">
      <div class="navbar-container ace-save-state" id="navbar-container">
        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
          <span class="sr-only">Toggle sidebar</span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>
        </button>

        <div class="navbar-header pull-left">
          <a href="index.html" class="navbar-brand">
            <small>
              <i class="fa fa-leaf"></i>
              学生管理系统控台
            </small>
          </a>
        </div>

        <div class="navbar-buttons navbar-header pull-right" role="navigation">
          <ul class="nav ace-nav">

            <li class="light-blue dropdown-modal">
              <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                <img class="nav-user-photo" src="../../public/static/image/user.png" alt="Jason's Photo" />
                <span class="user-info">
									<small>你好</small>
									{{loginUser.name}}
								</span>

                <i class="ace-icon fa fa-caret-down"></i>
              </a>

              <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
<!--                <li>-->
<!--                  <a href="#">-->
<!--                    <i class="ace-icon fa fa-cog"></i>-->
<!--                    系统设置-->
<!--                  </a>-->
<!--                </li>-->

<!--                <li>-->
<!--                  <a href="profile.html">-->
<!--                    <i class="ace-icon fa fa-user"></i>-->
<!--                    个人信息-->
<!--                  </a>-->
<!--                </li>-->

                <li class="divider"></li>

                <li>
                  <a v-on:click="logout()">
                    <i class="ace-icon fa fa-power-off"></i>
                    退出登陆
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div><!-- /.navbar-container -->
    </div>

    <div class="main-container ace-save-state" id="main-container">


      <div id="sidebar" class="sidebar responsive ace-save-state">


        <div class="sidebar-shortcuts" id="sidebar-shortcuts">
          <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
            <button class="btn btn-success">
              <i class="ace-icon fa fa-signal"></i>
            </button>

            <button class="btn btn-info">
              <i class="ace-icon fa fa-pencil"></i>
            </button>

            <button class="btn btn-warning">
              <i class="ace-icon fa fa-users"></i>
            </button>

            <button class="btn btn-danger">
              <i class="ace-icon fa fa-cogs"></i>
            </button>
          </div>

          <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
            <span class="btn btn-success"></span>

            <span class="btn btn-info"></span>

            <span class="btn btn-warning"></span>

            <span class="btn btn-danger"></span>
          </div>
        </div><!-- /.sidebar-shortcuts -->

        <ul class="nav nav-list">
          <li class="" id="welcome-sidebar">
            <router-link to="/welcome">
              <i class="menu-icon fa fa-tachometer"></i>
              <span class="menu-text">欢迎登陆 : {{loginUser.name}}</span>
            </router-link>

            <b class="arrow"></b>
          </li>

          <!--人员管理-->
          <li class="open">
            <a href="#" class="dropdown-toggle">
              <i class="menu-icon fa fa-list"></i>
              <span class="menu-text"> 人员管理 </span>

              <b class="arrow fa fa-angle-down"></b>
            </a>

            <b class="arrow"></b>

            <ul class="submenu">
              <li class="" id="man-student-sidebar">
                <router-link to="/user/studentInfo">
                  <i class="menu-icon fa fa-caret-right"></i>
                  学生管理
                </router-link>

                <b class="arrow"></b>
              </li>

              <li class="" id="man-teacher-sidebar">
                <router-link to="/user/teacherInfo">
                  <i class="menu-icon fa fa-caret-right"></i>
                  教师管理
                </router-link>

                <b class="arrow"></b>
              </li>

              <li class="" id="man-management-sidebar">
                <router-link to="/user/userInfo">
                  <i class="menu-icon fa fa-caret-right"></i>
                  管理员
                </router-link>

                <b class="arrow"></b>
              </li>

            </ul>
          </li>

          <!--班级管理-->
          <li class="open">
            <a href="#" class="dropdown-toggle">
              <i class="menu-icon fa fa-list"></i>
              <span class="menu-text"> 班级管理 </span>

              <b class="arrow fa fa-angle-down"></b>
            </a>

            <b class="arrow"></b>

            <ul class="submenu">
              <li class="" id="class-college-sidebar">
                <router-link to="/study/collegeInfo">
                  <i class="menu-icon fa fa-caret-right"></i>
                  学院管理
                </router-link>

                <b class="arrow"></b>
              </li>

              <li class="" id="class-major-sidebar">
                <router-link to="/study/majorInfo">
                  <i class="menu-icon fa fa-caret-right"></i>
                  专业管理
                </router-link>

                <b class="arrow"></b>
              </li>

              <li class="" id="class-class-sidebar">
                <router-link to="/study/classInfo">
                  <i class="menu-icon fa fa-caret-right"></i>
                  班级管理
                </router-link>

                <b class="arrow"></b>
              </li>
            </ul>
          </li>

          <!--课程管理-->
          <li class="open">
            <a href="#" class="dropdown-toggle">
              <i class="menu-icon fa fa-list"></i>
              <span class="menu-text"> 课程管理 </span>

              <b class="arrow fa fa-angle-down"></b>
            </a>

            <b class="arrow"></b>

            <ul class="submenu">
              <li class="" id="course-course-sidebar">
                <router-link to="/study/courseInfo">
                  <i class="menu-icon fa fa-caret-right"></i>
                  课程信息
                </router-link>

                <b class="arrow"></b>
              </li>
            </ul>
          </li>

          <!--视图分析-->
          <li class="open">
            <a href="#" class="dropdown-toggle">
              <i class="menu-icon fa fa-list"></i>
              <span class="menu-text"> 视图分析 </span>

              <b class="arrow fa fa-angle-down"></b>
            </a>

            <b class="arrow"></b>

            <ul class="submenu">
              <li class="" id="chart-college-sidebar">
                <router-link to="/chart/collegeChart">
                  <i class="menu-icon fa fa-caret-right"></i>
                  学院视图
                </router-link>

                <b class="arrow"></b>
              </li>
            </ul>

            <ul class="submenu">
              <li class="" id="chart-student-sidebar">
                <router-link to="/chart/studentChart">
                  <i class="menu-icon fa fa-caret-right"></i>
                  学生视图
                </router-link>

                <b class="arrow"></b>
              </li>
            </ul>
          </li>

        </ul><!-- /.nav-list -->
          <!--侧边栏收缩按钮-->
        <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
          <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
        </div>
      </div>

      <!--中间主界面-->

      <div class="main-content">
        <div class="main-content-inner">

           <div class="page-content">

            <div class="row">
              <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                  <router-view/>
                <!-- PAGE CONTENT ENDS -->
              </div><!-- /.col -->
            </div><!-- /.row -->
          </div><!-- /.page-content -->
        </div>
      </div><!-- /.main-content -->

      <!--底部 -->
      <div class="footer">
        <div class="footer-inner">
          <div class="footer-content">
						<span class="bigger-120">
							<span class="blue bolder">学生管理系统</span>
							hermit信息科技 &copy; 2021 hermit
						</span>
          </div>
        </div>
      </div>

      <!--回到顶层-->
      <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
      </a>
    </div><!-- /.main-container -->

  </div>
</template>

<script>

  export default {
    name: 'admin',
    data () {
      return {
        loginUser:{},
      };
    },
    mounted:function (){
      let _this = this;
      $('body').remove('login-layout blur-login');
      $('body').attr('class', 'no-skin');

      //重新加载js
      $.getScript('ace/assets/js/ace.min.js');
      _this.loginUser = Tool.getLoginUser();
    },
    methods:{
      login(){
        this.$router.push("/admin")
      },
      /**
       * 菜单激活样式 id为当前点击的菜单的id
       * @yangfan
       */
      activeSidebar: function (id) {
        // 兄弟菜单去掉active样式，自身增加active样式
        $("#" + id).siblings().removeClass("active");
        $("#" + id).siblings().find("li").removeClass("active");
        $("#" + id).addClass("active");

        // 如果有父菜单，父菜单的兄弟菜单去掉open active，父菜单增加open active
        let parentLi = $("#" + id).parents("li");
        if (parentLi) {
          parentLi.siblings().removeClass("open active");
          parentLi.siblings().find("li").removeClass("active");
          parentLi.addClass("open active");
        }
      },

      logout(){
        Tool.setLoginUser(null);
        this.$router.push("/login");
      },

    }
  }
</script>

<style scoped>

</style>